@charset "UTF-8";
//px2rem
@function px2rem($px, $base-font-size: 16px) {
  @if (unitless($px)) {
    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
    @return px2rem($px + 0px); // That may fail.
  } @else if (unit($px) == rem) {
    @return $px;
  }
  @return ($px / $base-font-size) * 1rem;
}

//宽高
@mixin wh($width: auto, $height: auto) {
  @if ($width == auto) {
  } @else if (unit($width) == px) {
    width: px2rem($width);
  } @else {
    width: $width;
  }
  @if ($height == auto) {
  } @else if (unit($height) == px) {
    height: px2rem($height);
  } @else {
    height: $height;
  }
}

//背景图宽高
@mixin bgs($width: auto, $height: auto) {
  @if (unit($width) == px and unit($height) == px) {
    background-size: px2rem($width), px2rem($width);
  } @else if (unit($width) == px) {
    background-size: px2rem($width), $height;
  } @else {
    background-size: $width, px2rem($height);
  }
}

//字体大小，颜色
@mixin sc($size, $color) {
  font-size: px2rem($size);
  color: $color;
}

//字体使用px单位，根据屏幕像素比自适应
@mixin font-dpr($font-size) {
  font-size: $font-size;

  [data-dpr="2"] & {
    font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
    font-size: $font-size * 3;
  }
}

//定位上下左右居中
@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

//定位上下居中
@mixin ct {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

//定位左右居中
@mixin cl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

//flex 布局和 子元素 对其方式
@mixin fj($type: space-between) {
  display: flex;
  justify-content: $type;
}

//超过固定宽高显示省略号
@mixin ellipsis($line-num: 1) {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: $line-num;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
